<template>
  <div class="list">
    <div class="box">
      <div class="header">
        <div class="header-title">数据总览</div>
      </div>
      <div class="conditions">
        <card
          title1="全部企业数量"
          :data1="all"
          title2="注册资本总额（万元)"
          :data2="allzhuce"

        ></card>
        <card
          title1="在营企业数量"
          :data1="zaiying"
          title2="注册资本总额（万元)"
          :data2="zaiyingzhuce"
          c_style="lan"
        ></card>
        <card
          title1="注销企业数量"
          :data1="zhuxiao"
          title2="注册资本总额（万元)"
          :data2="zhuxiaozhuce"
          c_style="orange"
        ></card>
      </div>
    </div>

    <div class="fenxi-title">企业分析</div>
    <div class="fenxi-item">
      <fenxi
        v-for="(item, index) in fenxi"
        :key="index"
        :href="item.href"
        :title="item.title"
        :icon="item.icon"
        :background="item.background"
        :desc="item.desc"
      ></fenxi>
    </div>
  </div>
</template>
<script>
import card from "./analysis/components/card";
import Api from "@/api/companyMap";
import fenxi from "./analysis/components/Fenxi";
export default {
  components: {
    fenxi: fenxi,
    card: card,
  },
  created() {
    console.log("query", this.$route.query);
    this.params.map = this.$route.query.map;
    this.fenxi=[
        {
          title: "成立时间",
          icon: "icon-bianzu18",
          desc: "以成立时间为主要维度进行企业分析",
          background: "#DC4646",
          href: {
            name: "map/analysis/chengli",
            query: {map:this.params.map}
          },
        },
        {
          title: "死亡时间",
          icon: "icon-daojishi",
          desc: "以死亡时间为分析维度进行企业分析",
          background: "#FF973A",
          href: {
            name: "map/analysis/siwang",
            query: {map:this.params.map}
          },
        },
        {
          title: "行业结构",
          icon: "icon-fenxi7",
          desc: "分析企业数据不同行业的数量及构成比例",
          background: "#C379E2",
          href: {
            name: "map/analysis/jiegou",
            query: {map:this.params.map}
          },
        },
        {
          title: "企业规模",
          icon: "icon-yidongyunkongzhitaiicon11",
          desc: "以注册资本不同维度反应不同企业规模",
          background: "#7DB9FF",
          href: {
            name: "map/analysis/guimo",
            query: {map:this.params.map}
          },
        },
      ]
    this.getDuoweidu()
  },
  methods: {
    getDuoweidu() {
      console.log(33333)  
      Api.fetchMapDuoweidu(this.params, (success) => {
        console.log(success);
        this.all = success.data.all;
        this.allzhuce = success.data.allzhuce;
        this.zaiying = success.data.zaiying;
        this.zaiyingzhuce = success.data.zaiyingzhuce;
        this.zhuxiao = success.data.zhuxiao;
        this.zhuxiaozhuce = success.data.zhuxiaozhuce;

      });
    },
  },
  data() {
    return {
      params: {},
      all: 0,
      allzhuce: 0,
      zaiying: 0,
      zaiyingzhuce: 0,
      zhuxiao: 0,
      zhuxiaozhuce: 0,
      fenxi: [

      ],
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/map/analysis.scss";
</style>
<style scoped>
.header-title {
  font-size: 21px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #000000;
}
.fenxi-title {
  padding: 24px 18px;
  font-size: 21px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #000000;
  line-height: 60px;
}
.fenxi-item {
  display: flex;
  flex-wrap: wrap;
}
.conditions {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  align-items: center;
}
</style>
